import { Nav, Navbar, Container } from 'react-bootstrap'
import { useEffect, useState } from 'react'
import logo from "../assets/img/logo.svg"
import navIcon1 from "../assets/img/nav-icon1.svg"
import navIcon2 from "../assets/img/nav-icon2.svg"
import navIcon3 from "../assets/img/nav-icon3.svg"

// 导航栏
export const NavBar = () => {
  // 当前是哪个导航链接高亮
  const [activeLink, setActiveLink] = useState('home')
  // 滚动事件监听, 滚动到不同位置, 不同的导航链接高亮
  const [scrolled, setScrolled] = useState(false)

  useEffect(() => {
    const onScroll = () => {
      if (window.scrollY > 50) {
        setScrolled(true)
      } else {
        setScrolled(false)
      }
    }

    window.addEventListener('scroll', onScroll)

    // 每次设置完后, 取消事件监听
    return () => window.removeEventListener('scroll', onScroll)
  }, [])

  // 点击导航链接事件, 设置高亮
  const onUpdateActiveLink = (value) => {
    console.log(value)
    setActiveLink(value)
  }

  return (
    <Navbar expand="lg" className={scrolled ? "scrolled" : ""}>
      <Container>
        {/* logo */}
        <Navbar.Brand href="#home">
          <img src={logo} alt="Logo" />
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav">
          <span className="navbar-toggler-icon"></span>
        </Navbar.Toggle>
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home"
              className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'}
              onClick={() => { onUpdateActiveLink('home') }}>
              Home
            </Nav.Link>
            <Nav.Link href="#skills"
              className={activeLink === 'skills' ? 'active navbar-link' : 'navbar-link'}
              onClick={() => { onUpdateActiveLink('skills') }}>
              Skills
            </Nav.Link>
            <Nav.Link href="#projects"
              className={activeLink === 'projects' ? 'active navbar-link' : 'navbar-link'}
              onClick={() => { onUpdateActiveLink('projects') }}>
              Projects
            </Nav.Link>
          </Nav>

          <span className='navbar-text'>
            <div className='social-icon'>
              <a href="#"><img src={navIcon1} alt="" /></a>
              <a href="#"><img src={navIcon2} alt="" /></a>
              <a href="#"><img src={navIcon3} alt="" /></a>
            </div>

            <button className="vvd" onClick={() => { console.log('connect') }}>
              <span>Let's Connect</span>
            </button>
          </span>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}